<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a><cite>活动管理</cite></a>
    <a><cite>邀请活动</cite></a>
  </div>
</div>

<div class="layui-fluid">
  <div class="layui-card">
    <div class="layadmin-search">
      <form class="layui-form" method="post" lay-filter="form_invite_search">
        <script type="text/html" template>
          <div class="layui-inline">
            <div class="layui-form-label">关键字搜索</div>
            <div class="layui-input-inline">
              <input type="text" name="keyword" value="{{decodeURIComponent(layui.router().search.keyword || '')}}"
                     class="layui-input"
                     placeholder="请输入关键字">
            </div>
          </div>
          <div class="layui-inline layui-btn-group">
            <button type="submit" lay-submit class="layui-btn" lay-filter="submit_invite_search">
              <i class="layui-icon layui-icon-search"></i>查询
            </button>
            <button type="submit" lay-submit class="layui-btn layui-btn-warm"
                    lay-filter="reset_invite_search">
              <i class="layui-icon layui-icon-close"></i>重置
            </button>
          </div>
        </script>
<!--        <button id="btn_add_invite" class="layui-btn">-->
<!--          <i class="layui-icon layui-icon-add-1"></i>创建邀请活动-->
<!--        </button>-->
      </form>
    </div>
    <div class="layui-card-body">
      <div id="table_product"></div>
      <script type="text/html" id="tpl_name">
        {{d.name}}
      </script>
      <script type="text/html" id="tpl_invite_time">
        {{d.start_time.substr(0, 10)}}～{{d.end_time.substr(0, 10)}}
      </script>
      <script type="text/html" id="tpl_invite_count">
        {{d.invited_count}}/{{d.invited_real_count}}
      </script>
      <script type="text/html" id="tpl_ongoing_status">
        {{# if (d.ongoing_status.value === 'not_start') { }}
        <span class="layui-font-gray">{{d.ongoing_status.description}}</span>
        {{# } }}
        {{# if (d.ongoing_status.value === 'on_going') { }}
        <span class="layui-font-green">{{d.ongoing_status.description}}</span>
        {{# } }}
        {{# if (d.ongoing_status.value === 'finished') { }}
        <span class="layui-font-red">{{d.ongoing_status.description}}</span>
        {{# } }}
      </script>
      <script type="text/html" id="tpl_enable_consume">
        {{# if (d.enable_consume === 1) { }}
        <span class="layui-font-green">是</span>
        {{# } else { }}
        <span class="layui-font-red">否</span>
        {{# } }}
      </script>
      <script type="text/html" id="tpl_status">
        {{# if (d.status.value === 'enabled') { }}
        <span class="layui-font-green">开启</span>
        {{# } }}
        {{# if (d.status.value === 'disabled') { }}
        <span class="layui-font-red">暂停</span>
        {{# } }}
      </script>
      <script type="text/html" id="tpl_agent">
        {{d.agent ? d.agent.name : ''}}
      </script>
      <script type="text/html" id="tpl_tool">
        <a class="layui-table-link" lay-href="invite/ranking/id={{d.id}}">
          <i class="layui-icon layui-icon-table"></i>
          查看
        </a>
        <div class="ant-divider"></div>
        <a class="layui-table-link" lay-event="detail">
          <i class="layui-icon layui-icon-edit"></i>
          编辑
        </a>
        <div class="ant-divider"></div>
        <a class="layui-table-link layui-font-red" lay-event="del">
          <i class="layui-icon layui-icon-delete"></i>
          删除
        </a>
        <div class="ant-divider"></div>
        {{# if (d.status.value === 'enabled') { }}
        <a class="layui-table-link layui-font-orange" lay-event="close">
          <i class="layui-icon layui-icon-pause"></i>
          暂停
        </a>
        {{# } }}
        {{# if (d.status.value === 'disabled') { }}
        <a class="layui-table-link" lay-event="open">
          <i class="layui-icon layui-icon-ok"></i>
          开启
        </a>
        {{# } }}
      </script>
    </div>
  </div>
</div>

<script>
  layui.use(['fox_table'], function () {
    let $ = layui.$
      , fox_table = layui.fox_table
      , admin = layui.admin
      , form = layui.form
      , view = layui.view

    let resourceUrl = 'admin/invites'

    // 列表查询
    fox_table.render({
      id: 'table_product'
      , url: resourceUrl
      , cols: [[
        {title: 'ID', field: 'id', width: 80, align: "center", sort: true}          , {title: '所属代理', templet: '#tpl_agent', width: 150}

        , {title: '活动名称', templet: '#tpl_name', align: 'left', minWidth: 100}
        , {title: '活动时间', templet: '#tpl_invite_time', align: 'middle', width: 200}
        , {title: '进行状态', templet: '#tpl_ongoing_status', align: 'middle', width: 100}
        , {title: '消费限制', templet: '#tpl_enable_consume', align: 'middle', width: 100}
        , {title: '启用状态', templet: '#tpl_status', align: 'middle', width: 100}
        , {title: '邀请/实名', templet: '#tpl_invite_count', align: 'middle', width: 150}
        // , {title: '操作', width: 300, align: 'middle', fixed: 'right', toolbar: '#tpl_tool'}
      ]]
    });

    //搜索
    form.on('submit(submit_invite_search)', function (d) {
      fox_table.reload(d.field);
      return false;
    });

    //重置
    form.on('submit(reset_invite_search)', function (d) {
      $("input[name='keyword']").val('');
      fox_table.reload({});
      return false;
    });

    //监听操作栏
    fox_table.toolbar(function (obj) {
      let data = obj.data;
      if (obj.event === 'detail') {
        showEditForm(data)
      }

      if (obj.event === 'del') {
        layer.confirm('确认删除该数据?', function (index) {
          admin.del('agent-admin/invite', data.id, function (res) {
            layer.close(index);
            fox_table.reload(); //重载表格
          })
        });
      }

      if (obj.event === 'close') {
        layer.confirm('确认暂停该活动?', function (index) {
          admin.post('agent-admin/invite/activity_close', data, function (res) {
            layer.close(index);
            fox_table.reload(); //重载表格
          })
        });
      }

      if (obj.event === 'open') {
        layer.confirm('确认启动该活动?', function (index) {
          admin.post('agent-admin/invite/activity_open', data, function (res) {
            layer.close(index);
            fox_table.reload(); //重载表格
          })
        });
      }
    });

    $('#btn_add_invite').click(function () {
      showEditForm();
      return false;
    })

    function showEditForm(data) {
      data = data || {};
      let minWidth = '800px';
      let minHeight = '500px';
      admin.popup({
        title: (data.id ? '编辑' : '创建') + '邀请活动'
        , area: [minWidth, minHeight]
        , id: 'popup_invite_activity'
        , success: function (layero, index) {
          view(this.id).render('invite/edit', data).done(function () {
            form.on('submit(submit_invite)', function (d) {
              if (!d.field.img_url) {
                layer.tips('请上传活动封面图片', $('#image_url'))
                return false
              }

              d.field.enable_consume = d.field.enable_consume === 'on' ? 1 : 0

              admin.post('agent-admin/invites/create', d.field, function () {
                history.back()
              })
              return false;
            })
          })
        }
      })
    }
  })
</script>

